<template>
  <div class="home">
    <div class="navPage">
      <div class="more"></div>
      <div class="nav">
        <div class="page">
          <h5>绘画入门</h5>
          <div class="navContent">
            <span>场景插画基础</span> / <span>角色原画设计</span>
          </div>
        </div>
        <div class="page">
          <h5>绘画入门</h5>
          <div class="navContent">
            <span>场景插画基础</span> / <span>角色原画设计</span>
          </div>
        </div>
        <div class="page">
          <h5>绘画入门</h5>
          <div class="navContent">
            <span>场景插画基础</span> / <span>角色原画设计</span>
          </div>
        </div>
        <div class="page">
          <h5>绘画入门</h5>
          <div class="navContent">
            <span>场景插画基础</span> / <span>角色原画设计</span>
          </div>
        </div>
        <div class="page">
          <h5>绘画入门</h5>
          <div class="navContent">
            <span>场景插画基础</span> / <span>角色原画设计</span>
          </div>
        </div>
      </div>
      <div class="LunBoTu"><LunBoTu></LunBoTu></div>
    </div>
    <div class="liveStreamingPage">
      <ClassNav :title="'大咖直播'"></ClassNav>
      <div class="liveStreamingContent">
        <LiveStreamingContentBig></LiveStreamingContentBig>
        <LiveStreamingContentMini></LiveStreamingContentMini>
        <LiveStreamingContentMini></LiveStreamingContentMini>
      </div>
    </div>
    <div class="course">
      <ClassNav :title="'精品课程'"></ClassNav>
      <div style="margin-left: -20px">
        <div
        style="display:inline-block"
          class=""
          v-for="(item, index) in courseData"
          :key="index"
          @click="linkInfo(item.courseZID)"
        >
          <CourseBox
            :imgsrc="item.img"
            :courseTitle="item.title"
            :wacthNumber="item.students"
            :autorimgsrc="item.autorImg"
            :autorName="item.autorName"
          ></CourseBox>
        </div>
      </div>
    </div>
    <div class="guestPage">
      <ClassNav :title="'专业课程'"></ClassNav>
      <TopCourse></TopCourse>
      <TopCourse></TopCourse>
      <TopCourse></TopCourse>
      <TopCourse></TopCourse>
      <TopCourse></TopCourse>
      <TopCourse></TopCourse>
      <TopCourse></TopCourse>
      <TopCourse></TopCourse>
    </div>
  </div>
</template>

<script>
import LunBoTu from "@/components/ZComponents/lunbotu";
import ClassNav from "@/components/ZComponents/classNav";
import TopCourse from "@/components/ZComponents/topcourse";
import CourseBox from "@/components/ZComponents/courseBox";

import LiveStreamingContentBig from "@/components/ZComponents/liveStreamingContentBig";
import LiveStreamingContentMini from "@/components/ZComponents/liveStreamingContentMini";

export default {
  data() {
    return {
      courseData: [],
    };
  },
  components: {
    LunBoTu,
    ClassNav,
    TopCourse,
    CourseBox,
    LiveStreamingContentBig,
    LiveStreamingContentMini,
  },
  methods:{
  linkInfo(id) {
      console.log(id);
      this.$router.push({ path: "/courseInfoz", query: { id } });
    },
  },
  mounted() {
    this.axios("/zjr/courseSearch", { params: { input: "绘画" } }).then(
      (res) => {
        this.courseData.length = 0;
        this.courseData.push(...res.data);
        console.log(res.data);
      }
    );
  },
};
</script>

<style lang="scss" scoped>
.home {
  background-color: #f6f8fa;
}
.navPage {
  position: relative;
  margin: 0 auto;
  width: 1200px;
  display: flex;
  padding-bottom: 40px;

  .nav {
    padding: 5px 0;
    border-radius: 10px;
    margin-right: 25px;
    background-color: #35384d;
    width: 204px;
    height: 327px;
    box-sizing: border-box;
    padding: 10px 0;
    .page {
      color: #fff;
      padding: 10px 6px 16px 20px;

      .navContent {
        margin-top: 5px;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
.liveStreamingPage {
  margin: 0 auto;
  width: 1200px;

  .liveStreamingContent {
    // margin-left: 0px;
    margin-top: 10px;
  }
}
.guestPage {
  margin: 0 auto;
  width: 1200px;
}
.course {
  margin: 0 auto;
  width: 1200px;
}
</style>